<script lang="ts">
import { ref, type Ref } from 'vue'
import { SearchOutlined, InfoCircleOutlined } from '@ant-design/icons-vue'

interface Item {
  value: string,
  class: string,
  target_url: string,
}

export default {
  components: {
    SearchOutlined,
    InfoCircleOutlined,
  },
  props: {
    searchBarWidth: {
      type: String,
      default: ''
    },
    hasSearchTips: {
      type: Boolean,
      default: true,
    },
    searchTips: {
      type: String,
      default: true,
    },
    searchDataOriginSource: {
      type: Array<Item>,
      default: []
    }
  },
  setup() {
    const search_item = ref<string>()
    const thinked_items: Ref<Array<Item>> = ref([])

    return {
      search_item,
      thinked_items,
    }
  },
  methods: {
    onSearch(searchValue: string) {
      this.$router.push({
        path: '/results',
        query: {
          queryString: searchValue
        }
      })
    },
    autoThinked(queryString: string) {
      if (!queryString) {
        this.thinked_items = []
        return
      }
      // @ts-ignore
      this.thinked_items = this.searchDataOriginSource.map(item => {
        if (item.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
          return {
            value: item.value, class: item.class, target_url: item.target_url,
          }
      }).filter(item => item != undefined)
      console.log(this.searchDataOriginSource)
      console.log(this.thinked_items)
    }
  }
}
</script>

<template>
  <a-auto-complete v-model:value="search_item" :style="{ width: searchBarWidth }" @change="autoThinked" :options="thinked_items">
    <template #option="item">
      <div style="float: left;">{{ item.value }}</div>
      <div style="float: right;"><a-tag color="green">{{ item.class }}</a-tag></div>
    </template>
    <a-input-search v-model:value="search_item" placeholder="输入搜索内容" style="width: 100%;" enter-button="搜索"
      @search="onSearch">
      <template #prefix>
        <search-outlined />
      </template>
      <template v-if="hasSearchTips" #suffix>
        <a-tooltip :title="searchTips">
          <info-circle-outlined style="color: rgba(0, 0, 0, 0.45)" />
        </a-tooltip>
      </template>
    </a-input-search>
  </a-auto-complete>
</template>

<style lang="scss" scoped></style>